<template>
    <VertifyFrameSet class="register" @submit="register" :tipShow="tipShow">
    <template v-slot:main>
      <!-- 左边 -->
      <div class="left-side">
        <h1>Create<br /> Your Account</h1>
        <div class="h1-att">open access</div>
        <p>
          邮箱和用户名是绑定的，所以你只需要填写邮箱或者用户名，
          即可发送邮件到您的邮箱，通过授权码进行验证和密码双重保证
          安全登入。
        </p>
      </div>
      <!-- 左边 -->

      <!-- 右边 -->
      <div class="right-side">

        <!-- 表单框 -->
        <div class="input-box">
          <div class="input-att">User</div>
          <!-- 长度不超过 7 -->
          <div class="input"><input autocomplete type="text" name="nickname" v-model="form.nickname" maxlength="8"></div>
        </div>
        <!-- 表单框 -->

        <!-- email 组件 -->
        <InputEmail v-model="form.email"></InputEmail>
        <!-- email 组件 -->
        

        <!-- 验证码 -->
        <div class="input-box">
          <div class="input-att">Code</div>
          <div class="input">
            <InputNumber  type="text"  name="code" v-model="form.code" maxlength="6" />
            <OnceTimingClick
              @timingRun="createUserCode"
             class="code-att" onText="发送验证码" offText="重发时间" :time="6" />
          </div>
        </div>
        <!-- 验证码 -->



        <div class="input-box">
          <div class="input-att">Password</div>
          <div class="input"><input type="text" name="password" v-model="form.password"></div>
        </div>

        <div  class="from-att">
          <router-link tag="a" :to="{name: 'Login'}">已有账号？Sign In</router-link>
        </div>
        

        <!-- 提交按钮 -->
        <div class="submit" @click="register" ref="submit">Sign Up</div>

        <!-- <div class="from-att">
          <router-link tag="a" :to="{name: 'FindBack'}" >忘记密码？Find Back</router-link>
        </div> -->
        
      </div>
    </template>
    <template v-slot:tipContent>
        <div class="warning-note">
          <div class="tip-text"><span>at present</span>： {{tipText}}</div>
          <div class="warning-title">
            Avoid the following situations <br />
          </div>
          <ul class="hint-box">
            <li class="hint"> 用户名不能短于3位，超过8位 </li>
            <!-- <li class="hint"> The user name cannot be less than 3 digits or more than 7 digits </li> -->
            <li class="hint"> 邮箱注意要正确，国内，不然无法收到验证码 </li>
            <!-- <li class="hint">The mailbox must be correct, or it will not receive the verification code. 注意要国内的啦</li> -->
            <li class="hint"> 验证码是4位数，有且仅有4位 </li>
            <!-- <li class="hint">The captcha is a four-digit code with and only four digits</li> -->
            <li class="hint"> 密码最短是8位 </li>
            <!-- <li class="hint">The minimum password is 8 bits</li> -->
          </ul>
          <div class="close-pop-up" @click="tipShow=false">ok</div>
        </div>

    </template>
  </VertifyFrameSet>
</template>

<script>
import { createUserCode } from '__SERVICE__/email_code.js'
import { createUser } from '__SERVICE__/user.js'
import OnceTimingClick from '__COMPONENTS__/once_timing_click/OnceTimingClick.vue'
import VertifyFrameSet from '__LAYOUTS__/vertify_frame_set/VertifyFrameSet.vue'
import InputEmail from '__COMPONENTS__/input_email/InputEmail.vue'
import InputNumber from '__COMPONENTS__/input_number/InputNumber.vue'

export default {
  name: 'Register',
    components: {
    VertifyFrameSet,
    InputEmail,
    OnceTimingClick,
    InputNumber
  },
  data: ()=>({
    form: {
      nickname: '',
      email: '',
      code: '',
      password: ''
    },
    tipShow: false,
    tipText: ''
  }),
  methods: {
    //异步方法发送验证码
    async createUserCode() {
      this.form.code = '' // 清空code框
      const result = await createUserCode(this.form.email)
    },
    //异步提交表单
    async createUser(formData) {
      try {
        const result = await createUser(formData)
        const {data, message} = result
        this.$Notice.success({
          title: '注册成功',
          desc: '跳转登入',
          duration: 2500
        })
        this.$router.push({name: 'Login'})
      }catch(e) {
        const {messageAuthor, message} = e
        this.tipText = message
        this.tipShow = true
      }
    },
    //注册
    register() {
      const {nickname, email, code, password} = this.form
      //用户名
      if(nickname.length < 3 || nickname.length > 8) {
        if(!nickname.length) this.tipText = '用户名不能为空'
        else this.tipText = '用户名长度不符要求'
        this.tipShow = true
        return
      }
      //邮箱
      const emailRegExp = /^[a-zA-Z0-9_\-]+([a-zA-Z0-9_\-\.]?)@([a-zA-Z0-9_\-]+)(\.[a-zA-Z0-9_-]+)+$/
      console.log(email.match(emailRegExp))
      // 括号是为了分开， .不可能是第一位，所以第二位以上
      if(!email.match(emailRegExp)) {
        this.tipText = '邮箱不符合规范'
        this.tipShow = true
        return
      }
      //验证码
      if(code.length < 6) {
        if(!vertify.length) this.tipText = '验证码不能为空'
        else this.tipText = '验证码位数不足'
        this.tipShow = true
        return
      }
      //密码
      if(password.length < 6) {
        this.tipText = '密码小于6位'
        this.tipShow = true
        return
      }      
      this.createUser(this.form)
    }
  },
  mounted() {

  }
}
</script>

<style>
  
</style>